<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			#box{
				width: 500px;
				height: 500px;	
				text-align: center;
				overflow: hidden;
				display: table-cell;
				vertical-align: middle;
				border: 1px solid black;
				position: relative;
			}
			#box1{
				width: 200px;
				height: 200px;
				opacity: 0.3;
				display: none;
				background: yellow;
				position: absolute;
				top: 0;
			}
			#max{
				width: 280px;
				height: 280px;
				position: absolute;
				left: 800px;
				top: 0;
				overflow: hidden;
				border: 1px solid red;
				display: none;
			}
		</style>
	</head>
	<body>
		<div id="box">
			<img src="img/1.jpg" id="xiaokuai"/>
			<div id="box1">
				
			</div>
		</div>
		<div id="max">
			<img src="img/2.jpg" id="datu"/>
		</div>
	</body>
	<script type="text/javascript">
		var box = document.getElementById("box");
		var box1 = document.getElementById("box1");
		var xiaoImg = document.getElementById("xiaokuai");
		var daImg = document.getElementById("datu");
		var max = document.getElementById("max");
		box.onmousemove = function(event){
			box1.style.display = "block";
			max.style.display = "block";
			var ev = event ||window.event;
			var xx = ev.clientX - box.offsetLeft;
			var yy = ev.clientY - box.offsetTop;
			var x = xx-box1.offsetWidth/2;
			var y = yy-box1.offsetHeight/2;
			var maxWidth = box.clientWidth-box1.offsetWidth;
			var maxHeight = box.clientHeight - box1.offsetHeight;
			var scaleX = x/maxWidth;
			var scaleY = y/maxHeight;
			max.scrollLeft = scaleX * (daImg.offsetWidth-max.clientWidth);
			max.scrollTop = scaleY * (daImg.offsetHeight-max.clientHeight);
			if(x >= maxWidth){
				x = maxWidth;
			}
			if(x <= 0){
				x = 0;
			}
			if(y >= maxHeight){
				y = maxHeight;
			}
			if(y <= 0){
				y = 0;
			}
			box1.style.left = x + "px";
			box1.style.top = y + "px";	
		}
		box.onmouseout = function(){
			box1.style.display = "none";
			max.style.display = "none";
		}
	</script>
</html>